<template>
  <div class="main">
    <div class="upload">
      <image-upload
        ref="uploadRef"
        :url="userForm.avatar"
        @upload="handleUpload"
      />
    </div>
    <div>
      <el-button @click="cancelSubmit">取消</el-button>
      <el-button
        :loading="loading"
        type="primary"
        @click="submitForm('userForm')"
      >确认提交</el-button>
    </div>
  </div>
</template>

<script>
import { updateUsersInfo } from '@/api/user'
export default {
  name: 'AvatarForm',
  props: {
    userInfo: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      userForm: {
        avatar: ''
      },
      loading: false
    }
  },
  methods: {
    async reset () {
      console.log(this.userForm)
      this.userForm.avatar = this.userInfo.avatar
      await this.$nextTick()
      this.$refs.uploadRef.reset()
    },
    // 上传图片
    handleUpload (url) {
      this.userForm.avatar = url
    },
    // 取消提交
    cancelSubmit () {
      this.$emit('cancel')
    },
    // 提交修改表单
    submitForm (formName) {
      this.handleUpdateUserInfo()
    },
    async handleUpdateUserInfo () {
      this.loading = true
      await updateUsersInfo(this.userForm)
      this.loading = false
      this.$message.success('信息修改成功')
      this.$emit('submit')
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  text-align: center;
  .upload {
    margin-bottom: 20px;
  }
}
</style>
